<template>
  <div id="salvenote">
    <div class="page-header">
      <span class="title-item">校准列表分页数据</span>
      <span class="download-btn">
        <!-- <a-icon type="cloud-download" />导出数据 -->
      </span>
    </div>
    <div class="tableclass">
      <a-table
        style="height: 94%"
        :data-source="data"
        :pagination="false"
        :columns="columns"
        :rowKey="(record) => record.id"
      >
        <span slot="action" slot-scope="text, action">
          <a class="solvebtn" @click="showModal(action)">详细信息</a>
        </span>
      </a-table>
      <div class="bottompage">
        <a-pagination
          :show-total="(total) => `共 ${total} 条记录`"
          :item-render="itemRender"
          v-model="page.current"
          :total="total"
          :defaultPageSize="page.size"
          @change="pagechangeFn"
          show-less-items
        />
      </div>
      <!-- 详情弹出框 -->
      <a-modal
        width="80%"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :footer="null"
      >
        <template v-if="detail.start == 1">
          <div class="scroll-bar">
            烟气校准
            <a-row
              class="monitorCalibrationRecordPo"
              v-for="(item, index) in listData"
              :key="index"
            >
              <a-col :span="4" v-for="(list, i) in item.overall" :key="i"
                >{{ list.field }}
                <div class="listcentent">{{ list.situation }}</div>
              </a-col>
            </a-row>
          </div>
        </template>

        <template v-if="detail.start == 2">
          <div class="scroll-bar">
            水质校准
            <a-row class="monitorCalibrationRecordPo">
              <a-col :span="4" v-for="(item, index) in listData" :key="index"
                >{{ item.field }}
                <div class="listcentent">
                  {{ item.situation }}
                </div>
              </a-col>
            </a-row>
          </div>
        </template>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";

export default {
  data() {
    return {
      listData: [],
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },
        {
          title: "校验时间",
          dataIndex: "time",
          align: "center",
        },
        {
          title: "项目名称",
          dataIndex: "itemsName",
          align: "center",
        },
        {
          title: "任务名称",
          dataIndex: "taskName",
          align: "center",
        },
        {
          title: "任务区域",
          dataIndex: "taskArea",
          width: "18%",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "20%",
          align: "center",
        },
      ],
      data: [],
      title: "",
      moment,
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      dept: {
        current: 1, //获取人员数据
        size: 200,
        roleId: "",
      },
      deptList: [], //用户ID
      //详情弹出框
      visible: false,
      confirmLoading: false,
      //表格数据
      list: [],
      //详情数据
      detail: [],
    };
  },

  methods: {
    //获取ID用户名
    getDept() {
      this.$api.userFindByPage(this.dept).then((res) => {
        console.log(res);
        this.deptList = res.data.data;
      });
    },
    //分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getdata();
    },
    //弹出框方法,查看详情
    showModal(data) {
      this.detail = data;
      console.log(data);
      if (data.start == 1) {
        this.$api.driftCalibration(this.detail.id).then((res) => {
          this.listData = res.data.data.overall;
          this.visible = true;
          console.log(this.listData);
        });
      }
      if (data.start == 2) {
        this.$api.waterDriftCalibration(this.detail.id).then((res) => {
          this.listData = res.data.data.overall[0].overall;
          this.visible = true;
          console.log(this.listData);
        });
      }
    },
    //弹出框关闭
    handleOk() {},
    //关闭弹窗
    handleCancel(e) {
      console.log("点击关闭按钮");
      this.visible = false;
    },
    //获取数据
    getdata() {
      var that = this;
      console.log(this.page);
      this.$api.listFindCalibrationListByPage(this.page).then((res) => {
        console.log(res);
        var result = res.data.data;
        for (var i = 0; i < result.length; i++) {
          if (result[i].equipmentCount == null) {
            result[i].equipmentCount = "";
          }
          if (result[i].equipmentType == null) {
            result[i].equipmentType = "";
          }
        }
        this.data = res.data.data;
        this.data.forEach((item) => {
          if (item.time === null) {
            item.time = "";
          } else {
            item.time = moment
              .unix(item.time / 1000)
              .format("YYYY/MM/DD HH:mm:ss");
          }
        });
        that.data = result;
        this.total = res.data.total;
      });
    },
  },
  mounted() {
    this.getdata();
  },
};
</script>
<style scoped src="../../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.scroll-bar {
  font-size: 24px;
  color: #4ccbad;
}
.monitorCalibrationRecordPo {
  font-size: 18px;
  text-align: center;
  color: #9fb043;
}
.listcentent {
  font-size: 16px;
  text-align: center;
  color: #bebebe;
  line-height: 30px;
 height: 30px;
}
.ant-row-flex-end {
  margin-top: 30px;
}
#salvenote {
  position: relative;
  width: 98%;
  height: 98%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}

::v-deep#salvenote .ant-table table {
  height: auto;
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}
.bottompage {
  position: absolute;
  right: 3%;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
}
#salvenote ::v-deep .ant-checkbox-inner {
  border: 2px solid #2e9685;
  background-color: rgba(140, 179, 174, 0.5) !important;
}
#salvenote .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: 0;
  background-color: rgba(30, 50, 48, 0.5);
  box-shadow: 0 0 10px 1px #188471 inset;
}

.ant-pagination {
  color: #bebebe;
}
.ant-form-item {
  color: #bebebe;
}
// 详情
::v-deep #salvenote .ant-form-item-children {
  color: rgba(255, 255, 255, 0.7);
}
</style>

